<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

    <style type="text/css">
        body {
            padding-top: 50px;
        }

        div[class^=col] {
            padding: 10px
        }

        .item {
            height: 120px;
            border-radius: 4px;
            background: #eee;
            text-align: center;
        }
    </style>
</head>
<script src="../../common.js" type="text/javascript" charset="utf-8"></script>
<script src="../../cookie.js" type="text/javascript" charset="utf-8"></script>
<script>
    onload = function () {
        // 1.获取节点，将商品信息添加到购物车
        var container = $(".container")[0];
        container.addEventListener("click", function (e) {
            e = e || event;
            var target = e.target || e.srcElement;
            // 限定只点击购买按钮才触发
            if (target.tagName == "A") {
                // 记录点击商品的信息，加入购物车
                var pname = target.parentNode.children[0].innerText; //商品名称
                var price = target.parentNode.children[1].children[0].innerText; //商品价格
                var pcode = target.parentNode.children[1].children[1].innerText; // 商品编号 
                // 将当前商品的属性存放到一个对象中
                var goods = {
                    pname,
                    price,
                    pcode,
                    "count": 1
                }
                // 尝试从cookie中取出清单
                var str = getCookie("plist");
                if (!str) {
                    // 如果为空，初始化
                    var arr = [];
                } else {
                    var arr = JSON.parse(str); //json将字符串转换为数组
                }

                // 判断当前添加的goods这个商品，是否已经在arr中存在
                //若存在则数量++，不存在则push进arr

                var _goods = arr.find(function (item) {
                    return item.pcode == goods.pcode;
                })
                if (_goods) {
                    _goods.count++;
                }
                else {
                    arr.push(goods);
                }
                // 写入cookie
                addCookie("plist", JSON.stringify(arr));
            }
        })

    }
</script>

<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-6 col-sm-9 col-xs-12">
                <div class="item">
                    <p class="text-center">商品1</p>
                    <p>价格： $<code>56.3</code> 编号：<span>2310</span></p>
                    <a class="btn btn-warning btn-sm">购买</a>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-9 col-xs-12">
                <div class="item">
                    <p class="text-center">商品2</p>
                    <p>价格： $<code>999</code> 编号：<span>5610</span></p>
                    <a class="btn btn-warning btn-sm">购买</a>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-9 col-xs-12">
                <div class="item">
                    <p class="text-center">商品3</p>
                    <p>价格： $<code>156</code> 编号：<span>1306</span></p>
                    <a class="btn btn-warning btn-sm">购买</a>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-9 col-xs-12">
                <div class="item">
                    <p class="text-center">商品4</p>
                    <p>价格： $<code>99.5</code> 编号：<span>9985</span></p>
                    <a class="btn btn-warning btn-sm">购买</a>
                </div>
            </div>
        </div>
    </div>

</body>


</html>